<template>
<div class="directorys-add">
  <el-dialog
    :title="formModel.id ?'修改' : ' 新增'"
    :visible="showDialog"
    @close="closeDialog"
  width="400px">
  <el-form ref="form" size="small" label-width="80px" :model="formModel" :rules="rules">
    <el-form-item label="所属学科" v-if="!$route.query.id" prop="subjectID">
          <el-select v-model="formModel.subjectID" style="width:100%">
            <el-option
              v-for="item in subjectOptions"
              :value="item.value"
              :label="item.label"
              :key="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="directoryName">
            <el-input placeholder="请输入目录名称" v-model="formModel.directoryName"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
              <el-button @click="closeDialog">取消</el-button>
              <el-button type="primary" @click="confirm()">确认</el-button>
            </div>
   </el-dialog>
 </div>
</template>

<script>
import { add, update, detail as detailDate } from '@/api/hmmm/directorys'
import { simple as subjectList } from '@/api/hmmm/subjects'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
    // data: {
    //   type: Object,
    //   default: () => {}
    // },
    // detail: {
    //   type: Object,
    //   default: () => {}
    // }
  },
  data () {
    return {
      show: false,
      formModel: {
        id: '',
        subjectID: '',
        directoryName: ''
      },
      rules: {
        subjectID: [
          { type: 'number', message: '请选择所属学科', tirgger: 'blur' }
        ],
        directoryName: [
          { required: true, message: '请输入目录名称', tirgger: 'blur' }
        ]
      },
      subjectOptions: []
    }
  },
  // mounted () {
  //   console.log()
  // },
  async created () {
    // 学科下拉选项
    const { data: subjectArr } = await subjectList()
    this.subjectOptions = subjectArr
  },
  methods: {
    closeDialog () {
      this.$emit('update:showDialog', false)
      // 重置数据
      this.formModel = {
        id: '',
        subjectID: '',
        directoryName: ''
      }
      this.$refs.form.resetFields()
    },
    // 回显
    async  updateDate (detail) {
      const { data } = await detailDate(detail)
      console.log(data)
      this.formModel = data
    },
    async confirm () {
      await this.$refs.form.validate()
      if (this.formModel.id) {
        const res = await update(this.formModel)
        // console.log('修改数据', res)
        this.formModel = res.config.data
        // console.log(this.formModel)
        this.$message.success('修改成功')
      } else {
        const res = await add(this.formModel)
        console.log(res)
        this.$message.success('添加成功')
      }
    }

  }
}
</script>

<style scoped lang='less'></style>
